<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1024 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M512 870.4c-166.912 0-295.25-47.79-381.952-142.336C-1.71 584.366 13.65 388.434 14.336 380.242c1.71-18.432 16.722-32.082 34.816-32.082 202.414 0 295.598 64.85 333.138 103.424 7.854 8.192 7.854 21.166-.338 29.01-8.192 7.854-21.166 7.854-29.01-.338-32.768-33.792-114.688-89.774-297.984-91.136-1.71 31.744-4.444 191.488 105.472 310.958 78.5 85.668 196.946 129.362 351.908 129.362 11.264 0 20.48 9.216 20.48 20.48S523.264 870.4 512 870.4z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M233.472 413.01c-8.53 0-16.384-5.12-19.456-13.65-26.286-74.066 4.096-148.142 14.336-168.96l.338-.338c.348-1.024 1.024-2.048 1.71-2.734.338-.686 1.024-1.362 1.362-2.048.348-.686.686-1.024 1.024-1.71a19.738 19.738 0 0 1 3.758-3.748l.338-.348a25.684 25.684 0 0 1 3.758-3.072c.338 0 .338-.338.686-.338 1.362-1.024 3.072-2.048 4.772-2.734 1.024-.676 2.396-1.024 3.42-1.362s2.048-.686 3.41-1.024c2.386-.686 4.434-.686 6.144-.686 16.046-1.024 130.386-5.12 177.152 73.052a20.265 20.265 0 0 1-7.168 27.986 20.265 20.265 0 0 1-27.986-7.168c-32.092-54.272-118.108-53.934-136.54-53.248-7.844 17.07-31.396 77.824-11.264 135.168a20.541 20.541 0 0 1-12.626 26.286c-2.734.338-4.782.676-7.168.676zm4.782-194.898-.348.338.348-.338zm550.226 194.56c-2.386 0-4.434-.338-6.83-1.024a20.685 20.685 0 0 1-12.626-26.286c20.142-57.344-3.758-118.098-11.264-135.168-19.456-.676-102.4 0-134.482 51.548-5.806 9.554-18.432 12.626-28.334 6.482-9.554-6.144-12.626-18.432-6.482-28.334 47.104-75.776 159.744-71.68 175.442-70.656 2.386 0 4.434.348 5.458.686.686 0 1.024.338 1.372.338l3.072 1.024 2.048 1.024c1.024.348 2.386 1.024 4.096 2.048.676.348 1.362 1.024 2.048 1.71.676.686 2.048 1.362 3.072 2.734l2.048 2.048c1.7 1.7 2.724 3.072 3.41 4.096.338.338.338.676.686 1.024 1.024 1.362 1.7 2.724 2.048 4.096 10.24 21.504 39.936 94.884 13.988 168.612-2.386 8.878-10.24 13.998-18.77 13.998zm-6.144-196.27c.338.348.686.348.686.686l-.686-.686z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M512 870.4c-10.578 0-20.48-4.782-27.31-13.312-70.994-90.798-115.026-183.634-131.41-275.794-13.312-74.414-8.192-148.48 14.674-220.16 38.236-119.47 114.012-192.512 120.494-198.318a34.437 34.437 0 0 1 47.442 0c6.144 5.806 82.268 78.848 120.494 198.656 22.866 71.68 27.648 145.746 14.674 220.16-16.384 92.16-60.416 184.658-131.072 275.456l-1.024 1.024C531.794 865.966 522.24 870.4 512 870.4zm0-673.454c-15.698 15.708-74.752 79.872-105.81 178.862C360.11 522.578 395.602 674.13 512 825.682 628.05 674.13 663.89 522.926 617.81 375.808 587.09 277.166 528.046 212.992 512 196.946z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M512 870.4c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48c155.31 0 273.408-43.346 351.57-129.024C973.138 581.294 970.752 421.202 969.042 389.12c-183.296 1.024-265.216 57.344-297.984 91.136-7.844 8.192-20.818 8.192-29.01.338-8.192-7.844-8.192-20.818-.338-29.01C679.25 413.01 772.434 348.16 974.848 348.16c18.094 0 33.106 13.65 34.816 32.082.686 8.54 16.046 204.8-115.712 347.822C807.598 822.272 679.25 870.4 512 870.4z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc2 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
